<template>
	<view class="content">
		<view class="bacFFF wid100" style="overflow: hidden;">
			<view class="wid90 mar dis disAl " style="height: 116rpx;">
				<image src="../../static/shiming1.png" style="width: 41rpx;height: 38rpx;"></image>
				<view class="mar-left20 foSi30 fowe600">{{infos.real_name}}</view>
				<view class="mar-left10 foSi25" style="color: #888;">{{infos.idcard | phoneFilter}}</view>
				<image src="../../static/renzheng.png" class="mar-left10" style="width: 25rpx;height: 25rpx;"></image>
			</view>
		</view>
		<view class="wid100 bacFFF mar-top20" style="overflow: hidden;">
			<view class="wid90 mar dis disAl foSi40 fowe600" style="height: 116rpx;">营业执照</view>
			<view class="wid100" style="background-color: #E5E5E5;height: 1rpx;"></view>
			<view class="wid100 dis disJuC" style="padding: 25rpx 0;">
				<image v-if="image.business_license" :src="image.business_license" class="wid90" @click.stop="imageClick(image.business_license)" mode="widthFix"></image>
			</view>
		</view>
		<view class="wid100 bacFFF mar-top20" style="overflow: hidden;">			<view class="wid90 mar dis disAl foSi40 fowe600" style="height: 116rpx;">资格证书</view>			<view class="wid100" style="background-color: #E5E5E5;height: 1rpx;"></view>			<view class="wid100 dis disJuC" style="padding: 25rpx 0;">				<image v-if="image.qua_img" :src="image.qua_img" class="wid90" @click.stop="imageClick(image.qua_img)" mode="widthFix"></image>			</view>		</view>
		<view class="wid100" style="position: absolute;top: -999999px;overflow: hidden;">
			<view>
				<canvas style="width: 1000px;height: 1000px;" canvas-id="firstCanvas1"></canvas>
				<canvas style="width: 1000px;height: 1000px;" canvas-id="firstCanvas2"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	import {pathToBase64,base64ToPath} from 'image-tools'
	
	export default {
		data() {
			return {
				url: this.global.url,
				id: '',
				infos: [],
				cvWidth: 0,
				cvHeight: 0,
				image: {
					business_license: '',
					qua_img: ''
				},
				load: false
			}
		},
		onLoad(option) {
			this.id = option.id
			this.info()
		},
		// 对后台返回的身份证号进行加密
		filters:{
		    phoneFilter(val) {
		        let reg=/^(.{3}).*(.{4})$/;
		        return (val.toString()).replace(reg,'$1***********$2');
		    }
		},
		methods: {
			imageClick(url){
				var that = this
				var image = []
				image[0] = url
				console.log(image)
				uni.previewImage({
					current: 0,
					urls: image
				});
			},
			info() {
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/technician/information',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						id: that.id
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.infos = result.data
							console.log(that.infos)
							that.getWatermark(that.infos.store.business_license, 'business_license')
							that.getWatermark1(that.infos.qua_img, 'qua_img')
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})
			},
			//照片添加水印
			getWatermark1(url,name) {
				var that = this
				let date = that.infos.store_name;  
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success: (ress) => {
							let ctx = uni.createCanvasContext('firstCanvas2'); //创建画布
							// //将图片src放到cancas内，宽高为图片大小
							ctx.drawImage(url,0,0,ress.width/2,ress.height/2);
							ctx.rotate(45 * Math.PI / 180); 
							//对斜对角线以左部分进行文字的填充
							for (let j = 1; j < 30; j++) { //用for循环达到重复输出文字的效果，这个for循环代表纵向循环
								ctx.beginPath();
								ctx.setFontSize(8);
								ctx.setFillStyle('#ffb330');
								ctx.fillText(date, 0, 20 * j);
								for (let i = 1; i < 30; i++) { //这个for循环代表横向循环，
									ctx.beginPath();
									ctx.setFontSize(8);
									ctx.setFillStyle('#ffb330');
									ctx.fillText(date, 40 * i, 20 * j);
								}
							} //两个for循环的配合，使得文字充满斜对角线的左下部分
										
							// 对斜对角线以右部分进行文字的填充逻辑同上
							for (let j = 0; j < 30; j++) {
								ctx.beginPath();
								ctx.setFontSize(8);
								ctx.setFillStyle('#ffb330');
										
								ctx.fillText(date, 0, -20 * j);
								for (let i = 1; i < 30; i++) {
									ctx.beginPath();
									ctx.setFontSize(8);
									ctx.setFillStyle('#ffb330');
									ctx.fillText(date, 40 * i, -20 * j);
								}
							}
							ctx.rotate(-45 * Math.PI / 180);
							ctx.draw(false, () => {
								setTimeout(() => { //使用定时是因为制作水印需要时间，设置定时才不会出bug
									uni.canvasToTempFilePath({ //将画布中内容转成图片，即水印与图片合成
										width: ress.width / 2, // 画布宽
										height: ress.height / 2, // 画布高
										canvasId: 'firstCanvas2',
										success: (res) => {
											// #ifndef H5
											that.image[name] = res.tempFilePath;
											// #endif
											
											// #ifdef H5
											that.zhuanyi(res.tempFilePath,name)
											// #endif
										}
									})
								}, 500)
							});
						}
					})
				})
			},
			//照片添加水印
			getWatermark(url,name) {
				var that = this
				let date = that.infos.store_name;  
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success: (ress) => {
							let ctx = uni.createCanvasContext('firstCanvas1'); //创建画布
							// //将图片src放到cancas内，宽高为图片大小
							ctx.drawImage(url,0,0,ress.width/2,ress.height/2);
							ctx.rotate(45 * Math.PI / 180); 
							//对斜对角线以左部分进行文字的填充
							for (let j = 1; j < 30; j++) { //用for循环达到重复输出文字的效果，这个for循环代表纵向循环
								ctx.beginPath();
								ctx.setFontSize(8);
								ctx.setFillStyle('#ffb330');
								ctx.fillText(date, 0, 20 * j);
								for (let i = 1; i < 30; i++) { //这个for循环代表横向循环，
									ctx.beginPath();
									ctx.setFontSize(8);
									ctx.setFillStyle('#ffb330');
									ctx.fillText(date, 40 * i, 20 * j);
								}
							} //两个for循环的配合，使得文字充满斜对角线的左下部分
										
							// 对斜对角线以右部分进行文字的填充逻辑同上
							for (let j = 0; j < 30; j++) {
								ctx.beginPath();
								ctx.setFontSize(8);
								ctx.setFillStyle('#ffb330');
										
								ctx.fillText(date, 0, -20 * j);
								for (let i = 1; i < 30; i++) {
									ctx.beginPath();
									ctx.setFontSize(8);
									ctx.setFillStyle('#ffb330');
									ctx.fillText(date, 40 * i, -20 * j);
								}
							}
							ctx.rotate(-45 * Math.PI / 180);
							ctx.draw(false, () => {
								setTimeout(() => { //使用定时是因为制作水印需要时间，设置定时才不会出bug
									uni.canvasToTempFilePath({ //将画布中内容转成图片，即水印与图片合成
										width: ress.width / 2, // 画布宽
										height: ress.height / 2, // 画布高
										canvasId: 'firstCanvas1',
										success: (res) => {
											// #ifndef H5
											that.image[name] = res.tempFilePath;
											// #endif
											
											// #ifdef H5
											that.zhuanyi(res.tempFilePath,name)
											// #endif
										}
									})
								}, 500)
							});
						}
					})
				})
			},
			zhuanyi(url,name){
				var that = this
				pathToBase64(url).then(base64 => {
				    console.log('运行')
				    let imgs = [];
				    that.image[name] = base64;
				    console.log(that.image)
				}).catch(error => {
				    console.error(error)
				})
				// base64ToPath(url).then(path => {
				// 	console.log('运行')
				// 	let imgs = [];
				// 	that.image[name] = path;
				// 	console.log(that.image)
				// }).catch(error => {
				// 	console.log('报错',error)
				// })
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F3F1F1;
	}
</style>